<template>
  <view class="certificateContainer">
    <cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles"></cunstom_navigation_bar>
    <view class="loginBox">

      <view class="topBg">
        <view class="top">
          修改密码
        </view>
        <view class="infoBox">
          <view class="phone">


            <uni-easyinput v-model="phone" />


          </view>
          <view class="tip">请输入绑定的手机号码</view>
          <view class="verifyCode mgt0">
            <view class="leftCode">

              <uni-easyinput v-model="verifyCode" />
            </view>
            <view v-if="canSend" class="right" @tap="getCode">获取验证码</view>

            <view v-else class="right">{{ second }}s后重发</view>
          </view>
          <view class="verifyCode">
            <view class="left">

              <uni-easyinput v-model="password" type="password" placeholder="请输入密码" />
            </view>

          </view>
          <view class="tip">密码必须包含大小写字母和数字组合，可以使用特殊符号，场度在8-16之间</view>
          <view class="verifyCode mgt0">
            <view class="left">

              <uni-easyinput v-model="passwordConfirm" type="password" placeholder="再次确认密码" />
            </view>

          </view>

        </view>
        <view class="saveBtn">
          <button @click="">确认修改</button>
        </view>

      </view>

    </view>
  </view>
</template>

<script>
  const util = require("@/utils/util.js")
  const api = require('@/utils/api.js');
  const app = getApp();
  // import jspdf from 'jspdf';

  export default {
    data() {
      return {
        phone: '',
        second: 60,
        scenicId: '',
        artistId: '',
        historyDetailHandle: '',
        q: '',
        fromWhere: false,
        passwordConfirm: '',
        password: '',
        canSend: true,
        avatarUrl1: '',
        nickName: '',
        phone: '',
        hasLogin: 0,
        canSubmit: false,
        verifyCode: '',
        isShow: null,
        startX: null,
        startY: null,
        endX: null,
        headPicUrl: '',
        avatarUrl: 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/page_login/headPortrait1.png',
        propStyles: {
          txtColor: '#333333',
          title: '',
          bgColor: 'transparent',
          // iconSrc: "../../static/ucenter/backIconWhite.png",
          iconSrc: "black",
          // bgSrc: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/myInfo/bg1.png",
          // bgSrc1: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/myInfo/bg2.png",

        }
      };
    },
    methods: {
      tips() {
        util.toast('请勾选用户注册与隐私保护服务协议')
      },
      getrealtimephonenumber(e) {

        console.log('实时手机号', e.detail.code)  // 动态令牌

        console.log('openId!!!', app.globalData.openId);
        console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
        console.log(e.detail.errno)  // 错误码（失败时返回）
        const that = this;
        util.request(api.getWxUserInfo, {
          code: e.detail.code,
          openId: app.globalData.openId
        }, 'GET', 'application/json')
          .then(res => {
            console.log("后台返回~~11");

            console.log("后台返回~~22" + JSON.stringify(res));
            if (res.code == 200) {
              let phoneNumber = res.msg;
              console.log("->phoneNumber:" + phoneNumber);
              console.log("->from:" + that.fromWhere);
              uni.navigateTo({
                // `/page_login/login1?from=${that.fromWhere}&phone=${phoneNumber}`
                url: `/page_login/login1?from=${that.fromWhere}&phone=${phoneNumber}&scenicId=${that.scenicId}&artistId=${that.artistId}&handle=${that.historyDetailHandle}&q=${that.q}`
              })
            } else {
              uni.navigateTo({
                url: `/pages/index/index`,
              })
            }

          }).catch((err) => {
            console.log('err', err)

          });

      },


      getPhoneNumber(e) {
        const that = this;
        //通过事件对象，可以看到，在event.detail中可以获取到code
        //code动态令牌，可以使用code换取用户是手机号
        //需要将code发送给后端，后端在接收到code以后
        //也需要调用API，换取用户的真正手机号
        //在换取成功以后，会将手机号返回给前端
        console.log('code', e.detail.code);
        util.request(api.getWxUserInfo, {
          code: e.detail.code,
          openId: app.globalData.openId
        }, 'GET', 'application/json').then(res => {
          if (res.code == 200) {
            let phoneNumber = res.msg;
            console.log("->phoneNumber:" + phoneNumber);
            uni.navigateTo({
              url: `/page_login/login1?from=${that.fromWhere}&phone=${phoneNumber}&scenicId=${that.scenicId}&artistId=${that.artistId}&handle=${that.historyDetailHandle}&q=${that.q}`,

            })
          } else {
            util.toast('获取失败，请重试~')
          }

        }).catch((err) => {
          console.log('err', err)

        });

      },


      goback() {
        uni.navigateBack()
      },
      getCode() {
        util.request(api.getVerifyCode, {

          phone: this.phone,

        }, 'GET', 'application/json').then(res => {

          if (res.code == 200) {
            this.canSend = false;
            this.startCountdown()
          } else {
            util.toast('获取失败，请重试~')
          }

        }).catch((err) => {
          console.log('err', err)

        });
      },
      startCountdown() {
        // console.log('startCountdown~~111')
        const that = this;
        var timer = setInterval(function () {
          // console.log('startCountdown~~222', that.second)
          that.second = that.second - 1;
          // console.log(that.second)
          if (that.second < 0) {
            return;
          }

        }, 1000)
        setTimeout(function () {
          clearInterval(timer)
          timer = null;
          that.canSend = true;
          that.second = 60;
        }, 60000)
      },
      onChooseAvatar(e) {
        console.log('头像---', e)
        const { avatarUrl } = e.detail;
        const that = this;
        this.avatarUrl = avatarUrl;
        // process.env.VUE_APP_BASE_URL
        uni.uploadFile({

          url: process.env.VUE_APP_BASE_URL + '/stage-api/wechat/wxUserInfo/headPictureUpload', //后端用于处理图片并返回图片地址的接口    
          filePath: avatarUrl,
          name: 'file',

          success: res => {
            //返回的是字符串，需要转成对象格式  
            let data = JSON.parse(res.data)
            console.log('ooooo', res)
            that.headPicUrl = data.data


          },
          fail: () => {
            console.log("err");
          }
        })


      },
      userNameInput(e) {
        this.nickName = e.detail.value;
        console.log(e.detail.value)
      },
      jumpStatement: function (e) {
        uni.navigateTo({
          url: `/page_loginProtection/loginProtection`,
        })
      },
      checkboxChange: function (e) {
        this.canSubmit = e.detail.value.length == 0 ? false : true;
      },

      scanFun() {
        uni.scanCode({
          success: function (res) {
            console.log('条码类型：' + res);
            let code = res.result;
            util.request(api.QuewryHandles, {
              handle: code,
            }, 'GET', 'application/json').then(res => {

              if (res.code == 200) {
                uni.navigateTo({
                  url: `/page_certificate/certificate?code=${code}`,
                })

              } else {
                util.toast(res.msg)
                uni.switchTab({
                  url: '/pages/index/index',
                })
              }

            }).catch((err) => {
              console.log('err', err)

            });



          }
        });
      },



    },
    onReady() {


    },

    onLoad: function (option) {
      // uni.enableAlertBeforeUnload({
      //   message: "还未登录，确定跳转吗？",
      //   success: function (res) {
      //     console.log("成功111：", res);
      //   },
      //   fail: function (err) {
      //     console.log("失败222：", err);
      //   },
      // });


      const that = this;
      that.fromWhere = option.from
      console.log('登录页面~~11', option)
      console.log('登录页面~~22', option.handle)
      that.artistId = option.artistId
      that.scenicId = option.scenicId
      if (option.q && option.from == 'acceptGift') {
        that.q = option.q
      }
      if (option.handle) {
        console.log('登录页面~~33', option.handle)
        that.historyDetailHandle = option.handle;
      }


    },
    onHide() {
      console.log('登录页面onHide');

    },
    onUnload() {
      console.log('登录页面onUnload');
      uni.$emit('loginToDetail', {
        'hasLogin': this.hasLogin
      });
    }


  };

</script>

<style lang="scss">
  .certificateContainer {
    width: 750rpx;
    height: 100vh;
    background: linear-gradient(72deg, #FFFCED 2%, #FFFCED 3%, #F4F4F4 100%);



    .loginBox {
      /* padding: 52rpx 30rpx 63rpx 30rpx; */
      /* background: url('https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/page_login/loginBg.png'); */
      width: 750rpx;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .topBg {
        width: 750rpx;
        height: 806rpx;
        padding-left: 30rpx;
        padding-right: 28rpx;

        .top {
          align-items: center;
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 48rpx;
          color: #333333;

          .logan {
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 24rpx;
            color: #333333;
          }

        }

        .infoBox {

          margin-top: 50rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

          .phone {


            padding-left: 38rpx;
            width: 692rpx;
            height: 102rpx;
            background: #FFFFFF;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            border: 2rpx solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;

            .telIcon {
              width: 50rpx;
              height: 50rpx;
              margin-right: 30rpx;
            }

            .prefix {
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 36rpx;
              color: #3B3B3B;
              margin-right: 20rpx;
              opacity: 80%;
            }

            .triangle {
              width: 0px;
              height: 0px;
              border: 15rpx solid transparent;
              border-top-color: #3D3D3D;
              margin-right: 20rpx;
              margin-top: 15rpx;
            }

            .separate {
              color: #333333;
              opacity: 0.6;
              margin-right: 56rpx;

            }
          }



          .verifyCode {
            display: flex;
            width: 100%;
            justify-content: center;
            margin-top: 24rpx;

            .left {
              padding-left: 38rpx;
              display: flex;
              align-items: center;
              width: 692rpx;
              height: 102rpx;
              background: #FFFFFF;
              border-radius: 20rpx 20rpx 20rpx 20rpx;
              border: 2rpx solid rgba(0, 0, 0, 0.1);

              .code {
                width: 50rpx;
                height: 50rpx;
              }
            }

            .leftCode {
              width: 492rpx;
              height: 102rpx;
              background: #FFFFFF;
              border-radius: 20rpx 20rpx 20rpx 20rpx;
              border: 2rpx solid rgba(0, 0, 0, 0.1);
            }

            .right {
              height: 102rpx;
              line-height: 102rpx;
              margin-left: 40rpx;
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              font-size: 32rpx;
              color: #E14614;
            }
          }

          .mgt0 {
            margin-top: 0rpx;
          }

          .tip {
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 24rpx;
            color: rgba(51, 51, 51, 0.8);
            line-height: 36rpx;
            width: 100%;
            margin: 10rpx 0rpx;
          }


        }

        .saveBtn {
          display: flex;
          justify-content: center;
          margin-top: 120rpx;

          button {
            width: 692rpx;
            height: 98rpx;
            background: #FECF01;
            border-radius: 20rpx 20rpx 20rpx 20rpx;

            font-family: Inter, Inter;
            font-weight: 600;
            font-size: 32rpx;
            color: #333333;
            line-height: 98rpx;

            text-align: center;
          }

        }
      }










      .checkbox {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #333333;
        margin-top: 24rpx;
        margin-bottom: 109rpx;
        width: 100%;
        display: flex;
        padding-left: 30rpx;

        .private {
          color: #FECF01;
          font-size: 24rpx;
        }
      }

      .bottomTxt {
        width: 100%;
        flex-direction: column;
        align-items: center;
        display: flex;
        justify-content: center;

        .line1 {
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
          opacity: 0.6;

        }

        .phone {
          width: 102rpx;
          height: 102rpx;
          margin-top: 54rpx;
        }


      }
    }


  }

  .placeholderStyle {
    font-size: 30rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .weui-input {
    font-size: 30rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
    width: 100%;
  }

  /deep/ .is-input-border {
    border: none !important;

  }
</style>